<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head th:include="include/head::commonHeaderCustom('查看课程老师评价信息',~{::style})">
    <style>
        .subtitle{
            font-weight: normal;
            color: #666;
            margin-right: 30px;
            padding-left: 16px;
        }

        .late{
            margin-left: 50px;
            background: red;
            color: #fff;
            padding: 5px 10px;
        }

        .title {
            color: #333;
        }
        .textareaContent{
            background: #eee;
            padding: 10px;
            border-radius: 4px;
            color: #666;
        }
        .tabs span{
            background: #f58c2d;
            color: #fff;
            padding: 5px 15px;
            border-radius: 15px;
            display: inline-block;
            margin-bottom: 5px;
        }
        .levelList{
            margin-bottom: 15px;
        }
        .levelList>p{
            margin: 0 0 10px;
        }
        h4{
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="ch-container">
    <div class="row">
        <div id="content" class="col-md-12 col-sm-12" style="padding:10px;width: 99%;">
            <div class="row" style="padding-top: 10px;">
                <div class="col-sm-12">
                    <b style="font-size: 16px;margin-right: 30px;padding-left: 2px;" th:text="${comments.language == 'cn'?'整体表现':'Overall Performance'}"></b>
                    <span>
                        <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.starNum)}">
                        <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.starNum<5}" th:each="item:${#numbers.sequence(comments.starNum+1,5)}">
                    </span>
                    <span class="late" th:if="${comments.cnName}" th:text="${(comments.language == 'cn'?'迟到':'Late') + comments.cnName}"> </span>
                </div>
            </div>
            <hr style="margin-top: 10px;margin-bottom: 10px;"/>
            <div class="row">
                <div class="col-md-5 col-sm-5">
                    <div class="levelList">
                        <h4 class="title"><strong th:text="${comments.language == 'cn'?'上课态度':'Class Attitude'}"></strong></h4>
                        <p>
                            <b class="subtitle" th:text="${comments.language == 'cn'?'上课参与度':'Class participation'}"></b>
                            <span id="participation">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.participation)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.participation<5}" th:each="item:${#numbers.sequence(comments.participation+1,5)}">
                            </span>
                        </p>
                        <p>
                            <b class="subtitle" th:text="${comments.language eq 'cn'?'上课专注度':'Class concentration'}"></b>
                            <span id="concentration">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.concentration)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.concentration<5}" th:each="item:${#numbers.sequence(comments.concentration+1,5)}">
                            </span>
                        </p>
                    </div>
                    <div class="levelList" th:unless="${comments.packageTypeFlag==1}">
                        <h4 class="title"><strong th:text="${comments.language == 'cn'?'学术表现':'Academic Performance'}"></strong></h4>
                        <p>
                            <b class="subtitle" th:text="${comments.language == 'cn'?'听力理解度':'Listening comprehension'}"></b>
                            <span id="listening">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.listening)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.listening<5}" th:each="item:${#numbers.sequence(comments.listening+1,5)}">
                            </span>
                        </p>
                        <p>
                            <b class="subtitle" th:text="${comments.language == 'cn'?'发音准确度':'Pronunciation accuracy'}"></b>
                            <span id="pronunciation">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.pronunciation)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.pronunciation<5}" th:each="item:${#numbers.sequence(comments.pronunciation+1,5)}">
                            </span>
                        </p>
                        <p>
                            <b class="subtitle" th:text="${comments.language == 'cn'?'词汇掌握度':'Vocabulary mastery'}"></b>
                            <span id="vocabulary">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.vocabulary)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.vocabulary<5}" th:each="item:${#numbers.sequence(comments.vocabulary+1,5)}">
                            </span>
                        </p>
                        <p>
                            <b class="subtitle" th:text="${comments.language == 'cn'?'语法掌握度':'Grammar mastery'}"></b>
                            <span id="grammar">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.grammar)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.grammar<5}" th:each="item:${#numbers.sequence(comments.grammar+1,5)}">
                            </span>
                        </p>
                        <p>
                            <b class="subtitle" th:text="${comments.language == 'cn'?'口语流利度':'Oral fluency'}"></b>
                            <span id="oral">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.oral)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.oral<5}" th:each="item:${#numbers.sequence(comments.oral+1,5)}">
                            </span>
                        </p>
                    </div>
                    <div class="levelList" th:if="${comments.packageTypeFlag==1}">
                        <h4 class="title"><strong th:text="${comments.language == 'cn'?'学术表现':'Academic Performance'}"></strong></h4>
                        <p style="margin-bottom: 0;">
                            <b class="subtitle" th:text='${comments.language eq "cn"?"沟通":"Communicative Success"}'></b>
                            <span id="listening">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.listening)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.listening<5}" th:each="item:${#numbers.sequence(comments.listening+1,5)}">
                            </span>
                        </p>
                        <p id="demo_listening" class="level" style="display: none;padding-top: 0;color: #666;">
                            <span style="background-color: #eee;padding: 2px 3px" th:text="${comments.demoComment.listening}"></span>
                        </p>
                        <p style="margin-bottom: 0;">
                            <b class="subtitle" th:text='${comments.language eq "cn"?"发音":"Pronunciation"}'></b>
                            <span id="pronunciation">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.pronunciation)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.pronunciation<5}" th:each="item:${#numbers.sequence(comments.pronunciation+1,5)}">
                            </span>
                        </p>
                        <p id="demo_pronunciation" class="level" style="display: none;padding-top: 0;color: #666;">
                            <span style="background-color: #eee;padding: 2px 3px" th:text="${comments.demoComment.pronunciation}"></span>
                        </p>
                        <p style="margin-bottom: 0;">
                            <b class="subtitle" th:text='${comments.language eq "cn"?"词汇":"Vocabulary"}'></b>
                            <span id="vocabulary">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.vocabulary)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.vocabulary<5}" th:each="item:${#numbers.sequence(comments.vocabulary+1,5)}">
                            </span>
                        </p>
                        <p id="demo_vocabulary" class="level" style="display: none;padding-top: 0;color: #666;">
                            <span style="background-color: #eee;padding: 2px 3px" th:text="${comments.demoComment.vocabulary}"></span>
                        </p>
                        <p style="margin-bottom: 0;">
                            <b class="subtitle" th:text='${comments.language eq "cn"?"语法/句型结构":"Grammar/Sentence Structure"}'></b>
                            <span id="grammar">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.grammar)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.grammar<5}" th:each="item:${#numbers.sequence(comments.grammar+1,5)}">
                            </span>
                        </p>
                        <p id="demo_grammar" class="level" style="display: none;padding-top: 0;color: #666;">
                            <span style="background-color: #eee;padding: 2px 3px" th:text="${comments.demoComment.grammar}"></span>
                        </p>
                        <p style="margin-bottom: 0;">
                            <b class="subtitle" th:text='${comments.language eq "cn"?"活跃度":"Activeness"}'></b>
                            <span id="oral">
                                <img alt="星" th:src="@{/static/img/raty/star_on.png}" th:each="item:${#numbers.sequence(1,comments.oral)}">
                                <img alt="星" th:src="@{/static/img/raty/star_off.png}" th:if="${comments.oral<5}" th:each="item:${#numbers.sequence(comments.oral+1,5)}">
                            </span>
                        </p>
                        <p id="demo_oral" class="level" style="display: none;padding-top: 0;color: #666;">
                            <span style="background-color: #eee;padding: 2px 3px" th:text="${comments.demoComment.oral}"></span>
                        </p>
                    </div>
                </div>
                <div class="col-md-7 col-sm-7">
                    <div>
                        <h4 class="title"><strong th:text="${comments.language == 'cn'?'投诉':'Complaints'}"></strong></h4>
                        <div class="tabs" th:if="${comments.listAttitudeTag !=null && comments.listAttitudeTag.size()>0}">
                            <span th:each="item:${comments.listAttitudeTag}" th:text="${item}"></span>
                        </div>
                        <p class="textareaContent" th:if="${comments.complaints!=null && comments.complaints!=''}" th:text="${comments.complaints}"></p>
                        <hr/>
                        <h4 class="title"><strong th:text="${comments.language == 'cn'?'老师建议':'Teachers suggestion'}"></strong></h4>
                        <p class="textareaContent" th:text="${comments.suggestion}"></p>
                        <hr/>
                        <h4 class="title"><strong th:text='${comments.language == "cn"?"教材":"Teaching materials"}'></strong></h4>
                        <p class="textareaContent" th:text='${comments.materials}'></p>
                    </div>
                </div>
            </div>
            <div class="row" style="padding-left: 14px">
                <div th:if="${comments.listKmc !=null && comments.listKmc.size()>0}">
                    <h4><strong th:text='${comments.language eq "cn"?"错词本":"Errors and mistakes"}'></strong></h4>
                    <ul>
                        <li style="display:flex;display:-webkit-flex;flex-wrap: wrap;-webkit-flex-wrap: wrap;padding-left: 20px;" th:each="item:${comments.listKmc}">
                            <P style="width:100%;text-indent:0em;" th:if="${item.name!=''}"  th:text="${item.name}"></P>
                            <th:block th:each="item2:${item.list}">
                                <P style="width:100%;text-indent:2em;" th:if="${item2.name!=''}" th:text="${item2.name}"></P>
                                <th:block th:each="item3:${item2.list}">
                                    <P style="width:100%;text-indent:4em;" th:if="${item3.name!=''}" th:text="${item3.name}"></P>
                                    <P style="width:100%;text-indent:6em;border-bottom:1px dashed #eee;margin: 0 0 10px;" th:each="item4:${item3.list}">
                                        <img th:src="@{/static/img/erroricon.png}"/><span style="padding-left: 6px;" th:text="${item4.errorInfo}"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <img th:src="@{/static/img/corrackicon.png}"/><span style="padding-left: 6px;" th:text="${item4.correctInfo}"></span>
                                    </P>
                                </th:block>
                            </th:block>
                        </li>
                    </ul>
                </div>
                <div th:if="${comments.listLJQK !=null && comments.listLJQK.size()>0}">
                    <h4><strong th:text='${comments.language eq "cn"?"知识点详解":"Knowledge Points Annotation"}'></strong></h4>
                    <div style="display: block;width: 100%;margin-left: 10px;" th:each="list,status:${comments.listLJQK}">
                        <div style="background: #eee;border-radius:4px;width: 80%;padding: 3px 3px;margin-bottom: 5px;margin-left: 8px"><P style="width:100%;text-indent:0em;margin: 0 0;" th:text="${(status.index+1)+'. ' + list.name}"></P></div>
                        <div style="padding-left: 2em;margin-bottom: 5px; display: flex;" th:each="list2:${list.list}">
                            <div style="width:20%;float: left;background: #eee;border-radius:4px;border:1px dashed #0bcb9a"><P style="width:100%;text-indent:0em;margin: 3px 3px;" th:text="${list2.firstName}"></P></div>
                            <div style="width:25%;margin-left:10px;float: left;background: #eee;border-radius:4px;border:1px dashed #0bcb9a" th:if="${list2.secondName!=''}"><P style="width:100%;text-indent:0em;margin: 3px 3px;" th:text="${list2.secondName}"></P></div>
                            <div style="width:25%;margin-left:10px;float: left;background: #eee;border-radius:4px;border:1px dashed #0bcb9a" th:if="${list2.thirdName!=''}"><P style="width:100%;text-indent:0em;margin: 3px 3px;" th:text="${list2.thirdName}"></P></div>
                            <div style="width:10%;float: left;" th:if="${list2.state==1}"> <img th:src="@{/static/img/corrackicon.png}"/> </div>
                            <div style="width:10%;float: left;" th:if="${list2.state==0}"> <img th:src="@{/static/img/erroricon.png}"/> </div>
                            <div style="width:10%;float: left;" th:if="${list2.state==-1}"> </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustom(~{::script})">
    <script>
        $(function () {
            $(".textareaContent").each(function () {
                $(this).html($(this).text().replace(/\n/g,'<br/>'));
            })
        });
    </script>
</div>
</body>
</html>
